<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <a-steps :current="step">
      <a-step title="填写基本信息" />
      <a-step title="单元(节)小组设计大纲" />
      <a-step title="财务结算" />
      <a-step title="小节计划书" />
    </a-steps>
    <div class="content">
      <a-form-model layout="horizontal" ref="ruleForm" :model="form" :rules="rules" :labelCol="{span: 7}"
        :wrapperCol="{span: 9}">
        <div class="step1" v-show="step === 0">
          <a-form-model-item label="发起人" prop="main.createBy">
            <a-input v-model="form.main.createBy" disabled></a-input>
          </a-form-model-item>
          <a-form-model-item label="发起人联系方式" :prop="'main.phone'">
            <a-input v-model="form.main.phone" disabled></a-input>
          </a-form-model-item>
          <a-form-model-item label="小组名称" prop="main.activityName">
            <a-input v-model="form.main.activityName" :maxLength="20" placeholder="请输入小组名称"></a-input>
          </a-form-model-item>
          <a-form-model-item label="小组性质" prop="main.activityProperty">
            <j-dict-select-tag v-model="form.main.activityProperty" dictCode="activity_property_community"
              placeholder="请选择小组性质" style="min-width: 100px" />
          </a-form-model-item>
          <a-form-model-item label="小组类型" prop="main.activityType">
            <j-dict-select-tag v-model="form.main.activityType" dictCode="activityType" placeholder="请选择"
              style="min-width: 100px" />
          </a-form-model-item>
          <a-form-model-item label="服务人数" prop="main.serverPeople"
            :rules="{required: true, message: '请输入', trigger: ['change']}">
            <a-input-number style="width: 100%;" v-model="form.main.serverPeople" :min="1" :step="1"
              placeholder="请输入阿拉伯数字"></a-input-number>
          </a-form-model-item>
          <a-form-model-item label="服务对象" prop="main.serverType">
            <a-select v-model="form.main.serverType" placeholder="请选择服务对象">
              <a-select-option :value="1">部分</a-select-option>
              <a-select-option :value="2">全部</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="日期/时间" prop="main.activityBeginDate">
            <a-date-picker style="width: 100%;" v-model="form.main.activityBeginDate" show-time
              placeholder="请选择活动开始的日期及时间，如2022-10-09 15:00" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></a-date-picker>
          </a-form-model-item>
          <a-form-model-item label="活动地点" prop="main.activityLocation">
            <a-cascader :options="areaOptions" placeholder="选择省/市/县（区）" :load-data="loadCascader" changeOnSelect
              :fieldNames="{ label: 'name', value: 'name', children: 'children' }" change-on-select
              v-model="form.main.activityLocation" />
          </a-form-model-item>
          <a-form-model-item label="活动地址">
            <a-input v-model="form.main.activityAddress" placeholder="请输入活动地址" :maxLength="50"></a-input>
          </a-form-model-item>
          <a-form-model-item label="人员安排" prop="main.workPlan">
            <a-textarea v-model="form.main.workPlan" :auto-size="{ minRows: 5, maxRows: 5 }"
              :placeholder="`请输入人员分工与职责，例如：\n负责社工：XX\n志愿者：XX\n督导：XX`" :maxLength="100"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="单元(节)数" prop="main.activityUnits">
            <a-input-number style="width: 100%;" v-model="form.main.activityUnits" :min="1" :step="1"
              placeholder="请输入单元（节）数" @change="onFormMainActivityUnitsChange"></a-input-number>
          </a-form-model-item>
          <a-form-model-item label="背景" prop="main.descBackground">
            <a-textarea v-model="form.main.descBackground" :auto-size="{ minRows: 5, maxRows: 5 }"
              :placeholder="`1.需求调查\n2.问题分析\n3.政策依据\n4.服务方向`"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="理论依据" prop="main.descActivityBasic">
            <a-textarea v-model="form.main.descActivityBasic" :auto-size="{ minRows: 5, maxRows: 5 }"
              placeholder="（阐述在小组服务中，运用了什么理论，以及理论在小组服务中是如何发挥作用的。）"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="小组目标" prop="main.descGroupTargets">
            <a-textarea v-model="form.main.descGroupTargets" :auto-size="{ minRows: 5, maxRows: 5 }"
              placeholder="请输入小组目标"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="招募方法" prop="main.descPropagateMethods">
            <a-textarea v-model="form.main.descPropagateMethods" :auto-size="{ minRows: 5, maxRows: 5 }"
              placeholder="请输入招募及宣传手法"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="预计困难与解决方法" prop="main.descFutureFocusPoint">
            <a-textarea v-model="form.main.descFutureFocusPoint" :auto-size="{ minRows: 5, maxRows: 5 }"
              placeholder="请输入预计困难与解决方法"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="小组评估" prop="main.descGroupEvaluation">
            <a-textarea v-model="form.main.descGroupEvaluation" :auto-size="{ minRows: 5, maxRows: 5 }"
              placeholder="请输入小组评估"></a-textarea>
          </a-form-model-item>
        </div>
        <div class="step2" v-show="step === 1">
          <a-row>
            <a-col :span="3">
              <div class="required">各单元（节）小组设计大纲：</div>
            </a-col>
            <a-col :span="21">
              <a-table :columns="step2Columns" :data-source="form.activities">
                <template slot-scope="text, record, index" slot="unitOrderStr">
                  <a-form-model-item :prop="`activities.${index}.unitOrderStr`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入单元（节）次', trigger: ['change']}">
                    <a-input v-if="record.edit" style="width: 100%;margin: -5px 0;" v-model="record.unitOrderStr"
                      placeholder="请输入单元（节）次" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="unitTarget">
                  <a-form-model-item :prop="`activities.${index}.unitTarget`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入目标', trigger: ['change']}">
                    <a-input v-if="record.edit" style="width: 100%;margin: -5px 0;" v-model="record.unitTarget"
                      placeholder="请输入目标" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="unitMainContent">
                  <a-form-model-item :prop="`activities.${index}.unitMainContent`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入活动主题', trigger: ['change']}">
                    <a-input v-if="record.edit" style="width: 100%;margin: -5px 0;" v-model="record.unitMainContent"
                      placeholder="请输入活动主题" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="unitBeginTime">
                  <a-form-model-item :prop="`activities.${index}.unitBeginTime`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请选择开始时间', trigger: ['change']}">
                    <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                      v-if="record.edit" style="width: 100%;margin: -5px 0;" v-model="record.unitBeginTime"
                      placeholder="请选择开始时间" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot-scope="text, record, index" slot="unitOwner">
                  <a-form-model-item :prop="`activities.${index}.unitOwner`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请选择单元（', trigger: ['change']}">
                    <a-select v-if="record.edit" v-model="record.unitOwner" placeholder="请选择单元（节）负责人"
                      @change="(val, opt) => record.unitOwnerName = opt.data.attrs.unitOwnerName">
                      <a-select-option v-for="(item, index) in peopleList" :key="index" :value="`${item.id}`"
                        :unitOwnerName="item.personnelName">
                        {{item.personnelName}}
                      </a-select-option>
                    </a-select>
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                  <div style="margin-bottom: 24px;">
                    <a type="link" v-if="record.edit" @click="record.edit = false">保存</a>
                    <a type="link" v-else @click="record.edit = true">编辑</a>
                    <a type="link" style="margin-left: 20px;" @click="onStep1Remove(index)">删除</a>
                  </div>
                </template>
              </a-table>
            </a-col>
          </a-row>
        </div>
        <div class="step3" v-show="step === 2">
          <a-row>
            <a-col :span="3">
              <div class="required">财务预算（元）：</div>
            </a-col>
            <a-col :span="21">
              <a-table :columns="step3columns" :data-source="form.badges">
                <template slot="itemName" slot-scope="text, record, index">
                  <a-form-model-item :prop="'badges.' + index + `.itemName`" :wrapperCol="{span: 24}"
                    :rules="{required: true, message: '请输入项目名称', trigger: ['change']}">
                    <a-input v-if="record.edit" style="margin: -5px 0" v-model="record.itemName"
                      placeholder="请输入项目名称" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot="amount" slot-scope="text, record, index">
                  <a-form-model-item :prop="'badges.' + index + `.amount`" :wrapperCol="{span: 24}"
                    :rules="{required: true, type: 'number', message: '请输入单价（元）', trigger: ['change']}">
                    <a-input-number v-if="record.edit" style="margin: -5px 0;width: 100%;" v-model="record.amount"
                      placeholder="请输入单价（元）" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot="itemNum" slot-scope="text, record, index">
                  <a-form-model-item :prop="'badges.' + index + `.itemNum`" :wrapperCol="{span: 24}"
                    :rules="{required: true, type: 'number', message: '请输入数量', trigger: ['change']}">
                    <a-input-number v-if="record.edit" style="margin: -5px 0;width: 100%;" v-model="record.itemNum"
                      placeholder="请输入数量" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot="total" slot-scope="text, record, index">
                  <a-form-model-item :prop="'badges.' + index + `.total`" :wrapperCol="{span: 24}"
                    :rules="{required: true, type: 'number', message: '请输入小计（元）', trigger: ['change']}">
                    <a-input-number v-if="record.edit" style="margin: -5px 0;width: 100%;" v-model="record.total"
                      placeholder="请输入小计（元）" />
                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>
                <template slot="source" slot-scope="text, record, index">
                  <a-form-model-item :prop="'badges.' + index + `.source`" :wrapperCol="{span: 24}"
                    :rules="{required: true, type: 'number', message: '请选择经费来源', trigger: ['change']}">
                    <template v-if="record.edit">
                      <a-select v-if="record.edit" v-model="record.source" placeholder="请选择经费来源">
                        <a-select-option :value="1">机构</a-select-option>
                        <a-select-option :value="2">用人单位</a-select-option>
                        <a-select-option :value="3">其他（请说明）</a-select-option>
                      </a-select>
                      <a-input v-if="record.source === 3" v-model="record.sourceComment" placeholder="请输入其他来源说明">
                      </a-input>
                    </template>

                    <template v-else>
                      {{ text }}
                    </template>
                  </a-form-model-item>
                </template>


                <template slot="operation" slot-scope="text, record, index">
                  <div style="margin-bottom: 24px;">
                    <a type="link" v-if="record.edit" @click="record.edit = false">保存</a>
                    <a type="link" v-else @click="record.edit = true">编辑</a>
                    <a type="link" style="margin-left: 20px;" @click="onStep2Remove(form.badges, index)">删除</a>
                  </div>

                </template>
              </a-table>
              <div class="add-step3-col-btn" @click="onAddStep3Col">
                <a-icon type="plus" />添加
              </div>
              <div class="total">申请经费总计：{{ amountTotal }}</div>
            </a-col>
          </a-row>
        </div>
        <div class="step4" v-if="form.main.activityUnits" v-show="step === 3">
          <div v-for="(item, index) in step4List" :key="index">
            <a-form-model-item label="单元（节）数">
              <a-select v-model="item.index" @change="onStep4NodeSelect($event, item)" placeholder="请选择单元（节）数">
                <a-select-option v-for="(node, index) in form.activities" :value="index" :key="index"
                  :disabled="step4SectionDisabled.includes(index)">第{{index + 1}}单元
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="本单元（节）主题" :prop="'activities.' + item.index + `.unitMainContent`"
              :rules="{required: true, message: '请输入本单元（节）主题', trigger: ['change']}">
              <a-input v-model="form.activities[item.index].unitMainContent" placeholder="请输入本单元（节）主题"></a-input>
            </a-form-model-item>
            <a-form-model-item label="日期/时间" :prop="'activities.' + item.index + `.unitBeginTime`"
              :rules="{required: true, message: '请选择日期/时间', trigger: ['change']}">
              <a-date-picker style="width: 100%;" v-model="form.activities[item.index].unitBeginTime"
                placeholder="请选择本单元（节）进行的时间日期" value-format="YYYY-MM-DD HH:mm:ss" show-time></a-date-picker>
            </a-form-model-item>
            <a-form-model-item label="活动地点" :prop="'activities.' + item.index + `.activityLocation`"
              :rules="{required: true, type: 'array', message: '请选择活动地点', trigger: ['change']}">
              <a-cascader :options="areaOptions" placeholder="请选择" :load-data="loadCascader" changeOnSelect
                :fieldNames="{ label: 'name', value: 'name', children: 'children' }" change-on-select
                v-model="form.activities[item.index].activityLocation" />
            </a-form-model-item>
            <a-form-model-item label="活动地址">
              <a-input v-model="form.activities[item.index].activityAddress" :maxLength="50"></a-input>
            </a-form-model-item>
            <a-form-model-item label="目标" :prop="'activities.' + item.index + `.unitTarget`"
              :rules="{required: true, message: '请输入活动目标', trigger: ['change']}">
              <a-input v-model="form.activities[item.index].unitTarget"></a-input>
            </a-form-model-item>
            <a-row>
              <a-col :span="7">
                <div class="required">流程：</div>
              </a-col>
              <a-col :span="15">
                <a-table :columns="step4columns" :data-source="form.activities[item.index].flows">
                  <template slot="costTime" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.costTime`"
                      :rules="{required: true,type: 'number', message: '请输入', trigger: ['change']}"
                      :wrapperCol="{span: 24}">
                      <a-input-number v-if="record.edit" :step="1" style="margin: -5px 0;width: 100%;"
                        v-model="record.costTime" />
                      <template v-else>
                        {{ text }}min
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="flowName" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.flowName`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.edit" :step="1" style="margin: -5px 0" v-model="record.flowName" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="descFlowTarget" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.descFlowTarget`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.edit" :step="1" style="margin: -5px 0" v-model="record.descFlowTarget" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="operation" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.operation`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.edit" :step="1" style="margin: -5px 0" v-model="record.operation" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="supplies" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.supplies`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.edit" :step="1" style="margin: -5px 0" v-model="record.supplies" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="flowOwner" slot-scope="text, record, index">
                    <a-form-model-item :prop="`activities.${item.index}.flows.${index}.flowOwner`"
                      :rules="{required: true, message: '请选择', trigger: ['change']}" :wrapperCol="{span: 24}">

                      <a-select v-if="record.edit" v-model="record.flowOwner" placeholder="请选择"
                        @change="(val, opt) => record.flowOwnerName = opt.data.attrs.unitOwnerName">
                        <a-select-option v-for="(item, index) in peopleList" :key="index" :value="`${item.id}`"
                          :unitOwnerName="item.personnelName">
                          {{item.personnelName}}
                        </a-select-option>
                      </a-select>
                      <template v-else>
                        {{ record.flowOwnerName }}
                      </template>
                    </a-form-model-item>
                  </template>

                  <template slot="control" slot-scope="text, record, index">
                    <div style="margin-bottom: 24px;">
                      <a type="link" v-if="record.edit" @click="record.edit = false">保存</a>
                      <a type="link" v-else @click="record.edit = true">编辑</a>
                      <a type="link" style="margin-left: 20px;" @click="onFlowRemove(form.activities[item.index].flows, index)">删除</a>
                    </div>

                  </template>
                </a-table>
                <div class="add-step3-col-btn" @click="onAddStep4FlowCol(form.activities[item.index].flows)">
                  <a-icon type="plus" />添加
                </div>
              </a-col>
            </a-row>
            <a-form-model-item label="预计困难与解决方法" :prop="'activities.' + item.index + `.descGroupEvaluation`"
              :rules="{required: true, message: '请输入预计困难与解决方法', trigger: ['change']}">
              <a-textarea v-model="form.activities[item.index].descGroupEvaluation" :auto-size="{ minRows: 8, maxRows: 100 }"
                :maxLength="1000">
              </a-textarea>
            </a-form-model-item>
            <a-divider style="margin: 10px 0;" dashed />
          </div>
          <div class="add-step3-col-btn" @click="onAddStep4Col">
            <a-icon type="plus" />新增一条 小组工作（小节）计划书
          </div>
        </div>
      </a-form-model>

      <div class="btn-wrap">
        <a-button v-if="step !== 0" style="margin: 0 15px;" @click="onPrev">上一步</a-button>
        <a-button style="margin: 0 15px;" type="primary" @click="onSubmit(false)">保存</a-button>
        <a-button style="margin: 0 15px;" @click="onSubmit(true)">提交</a-button>
        <a-button v-if="step !== 3" style="margin: 0 15px;" type="primary" @click="onNext">下一步</a-button>
      </div>
    </div>
  </a-card>
</template>

<script>
  import {
    getXzqhList,
    getXzqhByCode,
  } from '@/api/api'
  import {
    save,
    administrotorsList
  } from '@/api/sjsk/activity/group/index.js'
  import rules from './rules.js'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "addActivity",
    created() {
      this.getXzqh()
      this.getPeoPleList()
      this.form.main.createBy = this.userInfo.realname
      this.form.main.phone = this.userInfo.phone
      this.form.activities.push({
        edit: true,
        "activityLocation": [],
        "descFutureFocusPoint": "",
        "flows": [{
          edit: true,
          "costTime": null,
          "descFlowTarget": "",
          "flowEndTime": "",
          "flowName": "",

          "flowOwner": "",
          "flowStartTime": "",
          "operation": "",
          "supplies": "",
        }],
        "unitBeginTime": "",
        "unitMainContent": "",
        "unitOrder": 0,
        "unitOrderStr": "",
        "unitOwner": undefined,
        "unitOwnerName": "",
        "unitTarget": "",
      })
    },
    data() {
      return {
        step: 0,
        step4Length: 1,
        areaOptions: [],
        peopleList: [],
        step4List: [{
          index: 0
        }],
        form: {
          "activities": [],
          "badges": [{
            edit: true,
            total: null,
            "amount": null,
            "badgeOrder": null,
            "itemName": "",
            "itemNum": null,
            "source": undefined,
            "sourceComment": "",
          }],
          "isSubmit": true,
          "main": {
            "activityAddress": "",
            "activityBeginDate": "",
            "activityCode": "",
            "activityEndDate": "",
            "activityLocation": [],
            "activityName": "",
            "activityProperty": null,
            "activityResource": 2,
            "activityStatus": null,
            "activityType": null,
            "activityUnits": null,
            "approvalId": null,
            "approvalStatus": null,
            "descActivityBasic": "",
            "descBackground": "",
            "descFutureFocusPoint": "",
            "descGroupEvaluation": "",
            "descGroupTargets": "",
            "descPropagateMethods": "",

            "projectLocation": "",
            "projectName": "",
            "registrationEndDate": "",
            "serverPeople": null,
            "serverType": undefined,
            "workPlan": ""
          },
          "members": []
        },
        rules,
        step2Columns: [{
            title: '单元（节）次',
            width: '18%',
            dataIndex: 'unitOrderStr',
            scopedSlots: {
              customRender: 'unitOrderStr'
            },
          },
          {
            title: '目标',
            width: '18%',
            dataIndex: 'unitTarget',
            scopedSlots: {
              customRender: 'unitTarget'
            },
          },
          {
            title: '活动主题',
            width: '18%',
            dataIndex: 'unitMainContent',
            scopedSlots: {
              customRender: 'unitMainContent'
            },
          },
          {
            title: '时间安排',
            width: '18%',
            dataIndex: 'unitBeginTime',
            scopedSlots: {
              customRender: 'unitBeginTime'
            },
          },
          {
            title: '人员安排',
            width: '18%',
            dataIndex: 'unitOwner',
            scopedSlots: {
              customRender: 'unitOwner'
            },
          },
          {
            title: '操作',
            width: 150,
            dataIndex: 'operation',
            scopedSlots: {
              customRender: 'operation'
            },
          },
        ],
        step3columns: [{
            title: '项目',
            width: '18%',
            dataIndex: 'itemName',
            scopedSlots: {
              customRender: 'itemName'
            },
          },
          {
            title: '单价（元）',
            width: '18%',
            dataIndex: 'amount',
            scopedSlots: {
              customRender: 'amount'
            },
          },
          {
            title: '数量',
            width: '18%',
            dataIndex: 'itemNum',
            scopedSlots: {
              customRender: 'itemNum'
            },
          },
          {
            title: '小计（元）',
            width: '18%',
            dataIndex: 'total',
            scopedSlots: {
              customRender: 'total'
            },
          },
          {
            title: '经费来源',
            width: '18%',
            dataIndex: 'source',
            scopedSlots: {
              customRender: 'source'
            },
          },
          {
            title: '操作',
            width: 150,
            dataIndex: 'operation',
            scopedSlots: {
              customRender: 'operation'
            },
          },
        ],
        step4columns: [{
            title: '时间',
            width: '10%',
            dataIndex: 'costTime',
            scopedSlots: {
              customRender: 'costTime'
            },
          },
          {
            title: '名称',
            width: '18%',
            dataIndex: 'flowName',
            scopedSlots: {
              customRender: 'flowName'
            },
          },
          {
            title: '目标',
            width: '18%',
            dataIndex: 'descFlowTarget',
            scopedSlots: {
              customRender: 'descFlowTarget'
            },
          },
          {
            title: '内容及具体操作方式',
            width: '18%',
            dataIndex: 'operation',
            scopedSlots: {
              customRender: 'operation'
            },
          },
          {
            title: '所需物资',
            width: '18%',
            dataIndex: 'supplies',
            scopedSlots: {
              customRender: 'supplies'
            },
          },
          {
            title: '工作人员',
            width: '18%',
            dataIndex: 'flowOwner',
            scopedSlots: {
              customRender: 'flowOwner'
            },
          },
          {
            title: '操作',
            width: 150,
            dataIndex: 'control',
            scopedSlots: {
              customRender: 'control'
            },
          },
        ]
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),

      amountTotal: function() {
        let total = 0
        this.form.badges.map(item => {
          total += item.total
        })
        return total
      },
      step4SectionDisabled: function() {
        let disabledList = []
        this.step4List.map(item => {
          disabledList.push(item.index)
        })
        return disabledList
      }
    },
    methods: {
      onFormMainActivityUnitsChange(length) {
        const activitiesLength = this.form.activities.length
        if (this.form.activities.length < length) {
          for (let i = 0; i < length - activitiesLength; i++) {
            console.log(length - this.form.activities.length)
            console.log(i)
            this.form.activities.push({
              edit: true,
              "activityLocation": [],
              "descFutureFocusPoint": "",
              "flows": [{
                edit: true,
                "costTime": null,
                "descFlowTarget": "",
                "flowEndTime": "",
                "flowName": "",
                "flowOrderId": '',
                "flowOwner": "",
                "flowStartTime": "",
                "operation": "",
                "supplies": "",
              }],
              "unitBeginTime": "",
              "unitMainContent": "",
              "unitOrder": 0,
              "unitOrderStr": "",
              "unitOwner": undefined,
              "unitOwnerName": "",
              "unitTarget": "",
            })
          }
        } else if(this.form.activities.length > length) {
          const num = this.form.activities.length - length
          this.form.activities.splice(this.form.activities.length - num, num)
        }
        this.form = JSON.parse(JSON.stringify(this.form))
      },
      
      getPeoPleList(personnelName) {
        administrotorsList({
          personnelName
        }).then(res => {
          if (res.success) {
            console.log(res.result.records)
            this.peopleList = res.result.records
          }
        })
      },
      onCancel() {
        this.$router.replace('/activity/community/list')
      },

      onNext() {
        this.step += 1
        if (this.step === 3) {
          this.form.activities.map(item => {
            this.$set(item, 'activityLocation', JSON.parse(JSON.stringify(this.form.main.activityLocation)))

            item.activityAddress = this.form.main.activityAddress
          })
          this.form.activities = JSON.parse(JSON.stringify(this.form.activities))
        }
        console.log(this.form.activities)
      },
      onPrev() {
        this.step -= 1
      },
      getXzqh() {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            this.areaOptions = res.result.map(item => {
              item.isLeaf = false
              return item
            })
          }
        })
      },
      loadCascader(selectedOptions) {
        console.log(selectedOptions)
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        getXzqhList({
          level: targetOption.level + 1,
          parent: targetOption.code
        }).then(async (res) => {
          if (res.success) {
            targetOption.loading = false
            targetOption.children = res.result.map(item => {
              item.isLeaf = false
              return item
            })
            this.areaOptions = [...this.areaOptions];
            console.log(this.areaOptions)
          }
        })
      },
      onAddStep3Col() {
        this.form.badges.push({
          edit: true,
          total: null,
          "amount": null,
          "badgeOrder": null,
          "itemName": "",
          "itemNum": null,
          "source": undefined,
          "sourceComment": "",
        })
        this.form = JSON.parse(JSON.stringify(this.form))
      },
      onAddStep4Col() {
        if (this.step4List.length < this.form.activities.length) {
          this.step4List.push({
            index: this.step4List.length
          })
          this.form = JSON.parse(JSON.stringify(this.form))
        } else {
          this.$message.warning('小组工作（小节）计划书数量不能超过【填写基本信息】中的单元（节）数')
        }
      },
      onAddStep4FlowCol(item) {
        item.push({
          edit: true,
          "costTime": null,
          "descFlowTarget": "",
          "flowEndTime": "",
          "flowName": "",
          "flowOrderId": '',
          "flowOwner": "",
          "flowStartTime": "",
          "operation": "",
          "supplies": "",
          "unitId": '',
        })
        this.form = JSON.parse(JSON.stringify(this.form))
      },
      onStep1Remove(index) {
        console.log(index)
        this.form.activities.splice(index, 1)
        console.log(this.form.activities)
        this.form.activities = JSON.parse(JSON.stringify(this.form.activities))
      },
      onStep2Remove(list, index) {
        list.splice(index, 1)
      },
      onFlowRemove(list, index) {
        list.splice(index, 1)
      },
      onStep4NodeSelect(index, obj) {
        obj.activityLocation = this.form.main.activityLocation
        obj.activityAddress = this.form.main.activityAddress
        obj.descFutureFocusPoint = this.form.main.descFutureFocusPoint
      },
      onSave() {
        this.$refs.ruleForm.validate()
      },
      onSubmit(isSubmit) {
        console.log(this.form)
        
        this.$refs.ruleForm.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          form.isSubmit = isSubmit
          form.main.activityLocation = form.main.activityLocation.toString()
          form.activities.map(item => {
            item.activityLocation = item.activityLocation.toString()
          })
          save(form).then(res => {
            const { success } = res
            this.$message.success('新增活动成功！')
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.ant-input-number-handler-wrap {
      display: none;
  }
  .content {
    padding-top: 40px;
  }

  .required {
    text-align: right;

    &::before {
      content: '*';
      color: red;
      margin-right: 5px;
    }

  }

  .add-step3-col-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    cursor: pointer;

    &:active {
      background-color: rgba(#000, .1);
    }
  }

  .btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
  
</style>
